import { reactive, toRefs } from 'vue'
import { defineStore } from 'pinia'
import { localStore } from '@/utils'

const key = 'asideOpened'

export const useAppStore = defineStore('app', () => {
  const state = reactive({
    asideOpened: localStore.get(key) ? !!+localStore.get(key) : true
  })

  const toggleAside = () => {
    state.asideOpened = !state.asideOpened
    if (state.asideOpened) {
      localStore.set(key, '1')
    } else {
      localStore.set(key, '0')
    }
  }

  const closeAside = () => {
    state.asideOpened = false
    localStore.set(key, '0')
  }

  return { ...toRefs(state), closeAside, toggleAside }
})
